<template>
    <section>
        <div class="top">
            <img src="@/mobile/imgs/hunnu.png" alt="">
            <h2>{{ vote.title | voteTitle }}</h2>
            <h1>选举</h1>
        </div>
        <div class="fun">
            <div class="scan" @click="signIn()"><van-icon name="scan" /> 扫码签到</div>
            <div class="ranking" @click="$troute.query('mvRanking',vote.id);"><van-icon name="medal-o" /> 排行榜</div>
        </div>
        <div class="wrapper">
            <div>
                <div class="title">
                    <h2>
                        <p>候<i></i>选<i></i>人</p>
                        <span>按姓名笔画为序</span>
                    </h2>
                </div>
                <ul>
                    <li v-for="(item,index) in candidates" :key="index">
                        <i>
                            <!-- <img :src="item.photograph" alt=""> -->
                            <img :src="item.xgno | imgUrl" alt="">
                        </i>
                        <p>{{ item.userName }}</p>
                        <span @click="updateList(index,'弃票')" :class="list[index].recordResult=='弃票'?'on':''">弃票</span>
                        <span @click="updateList(index,'不赞成')" :class="list[index].recordResult=='不赞成'?'on':''">不赞成</span>
                        <span @click="updateList(index,'赞成')" :class="list[index].recordResult=='赞成'?'on':''">赞成</span>
                    </li>
                </ul>
                <div class="title">
                    <h2>
                        <p>另<i></i>选<i></i>人</p>
                    </h2>
                </div>
                <ul>
                    <li v-for="(item,index) in other" :key="index">
                        <p>{{ item.optionName }}</p>
                        <span @click="agree('赞成')" :class="otherObj.recordResult=='赞成'?'on':''">赞成</span>
                    </li>
                    <li v-if="btn">
                        <button @click="show=true">添加姓名</button>
                    </li>
                </ul>
                <h1 @click="submit">提交投票结果</h1>
            </div>
        </div>
        <van-popup v-model="show" round position="bottom" :style="{ height: '20%' }" >
            <van-field v-model="otherName" label="姓名：" placeholder="请输入另选人" />
            <p class="btn" @click="addOther">添加</p>
        </van-popup>
    </section>
</template>
<script>
import api from "@/data/api/index.js";
import qs from "qs";

import Vue from 'vue';
import { Icon } from 'vant';
import { Toast } from 'vant';
import { Popup } from 'vant';
import { Field } from 'vant';

Vue.use(Field);
Vue.use(Popup);
Vue.use(Toast);
Vue.use(Icon);

export default {
    data(){
        return{
            id: '',         //选举投票编号
            candidates: [], //候选人集合
            vote: {},       //投票选举信息
            my: {},         //选举人和当前用户信息
            other: [],     //另选人集合（限一人）
            otherName: '',     //另选人姓名
            otherObj: {
                voteid: '',           //投票编号
                optionId: '',       //选项编号(候选人的账号id)
                optionName: '',     //选项名称(候选人的姓名)
                optionType: '2',     //选项类型(1:预设,2:新增)
                recordResult: '',    //提交结果(赞成、不赞成、弃权)
            },
            list: [],       //投票数据集合
            // total: 0,      //赞成的票数（最大值为：候选人数-1）
            show: false,
            btn: true,
        }
    },
    methods:{
        voteInterface(){
            api.voteInterface(this.id).then(res => {
                this.candidates=res.candidates;
                this.vote=res.vote;
                this.my=res.my;
                this.getList(this.candidates);
            });
        },
        // 选举签到
        signIn(){
            api.signIn(this.id).then(res => {
                if(res.code=="success"){
                    Toast.success("签到成功");
                }else{
                    Toast.fail("签到失败");
                }
            });
        },
        // 
        getList(arr){
            for(let i=0;i<arr.length;i++){
                let obj={
                    voteid: this.id,           //投票编号
                    optionId: arr[i].id,       //选项编号(候选人的账号id)
                    optionName: arr[i].userName,     //选项名称(候选人的姓名)
                    optionType: '1',     //选项类型(1:预设,2:新增)
                    recordResult: '',    //提交结果(赞成、不赞成、弃权)
                };
                this.list.push(obj);
            }
        },
        // TODO
        updateList(index,result){
            // 防止重复操作
            if(this.list[index].recordResult==result){
                return false;
            }
            // 筛选赞成票
            let arr=this.list.filter((item)=>{
                return item.recordResult=="赞成";
            });
            let num=arr.length;
            if(num==this.list.length-1 && result=="赞成"){
                Toast.fail('赞成票数已达上限，不能再投赞成票了');
                return false;
            }
            //
            this.list[index].recordResult=result;
        },
        // 添加另选人姓名
        addOther(){
            if(!this.otherName){
                Toast.fail("请输入\n另选人的姓名");
            }else{
                this.otherObj.voteid=this.id;
                this.otherObj.optionName=this.otherName;
                this.show=false;
                this.btn=false;
                this.other.push(this.otherObj);
            }
        },
        // 赞成
        agree(result){
            if(!this.otherObj.recordResult){
                this.otherObj.recordResult=result;
                this.otherObj.optionType="2"
            }
        },
        // 提交投票结果
        submit(){
            let jsonStr='';
            if(this.other.length>0){
                if(this.other[0].recordResult=="赞成"){
                    jsonStr=JSON.stringify(this.other);
                }else{
                    Toast.fail("请完成投票");
                    return;
                }
            }else{
                let result=this.list.filter((item)=>{
                    return item.recordResult!="";
                });
                if(result.length==this.list.length){
                    jsonStr=JSON.stringify(this.list);
                }else{
                    Toast.fail("请完成投票");
                    return;
                }
            }

            api.vote(this.id,{'jsonStr':jsonStr}).then(res => {
                if(res.code=="success"){
                    Toast.success("投票成功");
                }else{
                    Toast.fail(res.desc);
                }
            });
        },
    },
    mounted(){
        let str=this.$route.query.tdata;
        this.id=JSON.parse(str).id;
        this.voteInterface();
    },
    filters:{
        voteTitle(title){
            let str=String(title);
            return String(str).slice(0,str.length-2);
        },
        imgUrl(val){
            return 'https://i.hunnu.edu.cn/ums/avatar/' + val;
        }
    }
}
</script>
<style lang="scss" scoped>
section{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
    background: #880002 url(../imgs/vote-bg.jpg) no-repeat center top;
    background-size: contain;
}
.top{
    padding: 20px 15px;
    color: #fff;
    text-align: center;
    img{
        height: 40px;
    }
    h2{
        margin-top: 10px;
        font-size: 32px;
        font-weight: normal;
    }
    h1{
        font-size: 60px;
    }
}
.fun{
    height: 35px;
    line-height: 35px;
    margin-bottom: 25px;
    color: #fff;
    div{
        background-color: #3C5FBC;
        .van-icon::before{
            position: relative;
            top: 4px;
            font-size: 20px;
        }
    }
    .scan{
        float: left;
        padding: 0 15px 0 25px;
        border-radius: 0 25px 25px 0;

    }
    .ranking{
        float: right;
        padding: 0 25px 0 15px;
        border-radius: 25px 0  0 25px;
    }
}
.wrapper{
    padding: 0 30px 30px;
    >div{
        position: relative;
        overflow: hidden;
        &::before,&::after{
            content: '';
            position: absolute;
            top: 38px;
            left: -8px;
            width: 20px;
            height: 20px;
            background-color: #880002;
            border-radius: 50%;
            z-index: 9;
        }
        &::after{
            left: auto;
            right: -8px;
        }
    }
    .title{
        position: relative;
        z-index: 1;
        >h2{
            position: relative;
            display: flex;
            align-items: center;
            height: 48px;
            padding: 0 15px 0 30px;
            font-weight: normal;
            background-image: linear-gradient(#9E1510, #CA342D);
            z-index: 2;
            p{
                color: #e0af85;
                font-size: 20px;
                flex-grow: 1;
                display: inline-flex;
                align-items: center;
                i{
                    display: inline-flex;
                    width: 5px;
                    height: 5px;
                    margin: 0 5px;
                    border: 2px solid #e0af85;
                    border-radius: 50%;
                }
            }
            span{
                color: #fff;
                opacity: .5;
                font-size: 13px;
            }
        }
        &::after{
            content: '';
            position: absolute;
            top: -2px;
            left: -15px;
            right: -15px;
            bottom: 15px;
            border: 2px solid #EAAD7E;
            background-color: #880002;
            border-radius: 25px;
            z-index: -1;
        }
        &:last-of-type{
            &::after{
                display: none;
            }
        }
    }
    ul{
        position: relative;
        max-height: 283px;
        padding: 12px 12px 0;
        background-color: #fff;
        border-bottom: 20px solid #fff;
        overflow: auto;
        overflow-x: visible;
        z-index: 8;
        li{
            display: flex;
            align-items: center;
            height: 45px;
            padding: 15px 0 10px;
            font-size: 16px;
            font-weight: bold;
            border-bottom: 1px solid #CBCBCB;
            &:last-child{
                border-bottom: 0;
            }
            i{
                width: 45px;
                height: 45px;
                margin-right: 10px;
                background: #F8EAE0 url(../imgs/user.png) no-repeat center center;
                background-size: 16px 20px;
                border-radius: 50%;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            p{
                flex-grow: 1;
            }
            span{
                display: inline-flex;
                padding: 3px 10px;
                margin-left: 5px;
                color: #666;
                font-size: 12px;
                border: 1px solid #CFCFCF;
                border-radius: 3px;
            }
            span.on{
                color: #fff;
                background-color: #880002;
            }
        }
        &:last-of-type{
            padding-top: 0;
            border-bottom-width: 5px;
            li{
                padding-top: 10px;
                button{
                    width: 100%;
                    height: 40px;
                    color: #985720;
                    font-size: 16px;
                    background-color: #F7DBC6;
                    border: 1px solid #C17C47;
                    border-radius: 5px;
                }
            }
        }
    }
    >div>h1{
        height: 50px;
        line-height: 50px;
        margin-top: 20px;
        color: #fff;
        font-size: 20px;
        text-align: center;
        letter-spacing: 2px;
        background-color: #EAAD7E;
        border-radius: 25px;
    }
}
.btn{
    line-height: 40px;
    margin: 20px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    background-color: #985720;
    border-radius: 3px;
}
</style>